import { Component, Emit, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import RenderItem from '../RenderItem'
import Icon from '@/assets/operation/czyzm.png'
import type { FormModalDto } from '@/components/modal/Modal'
import renderModal, { getModelValue } from '@/components/modal/Modal'
import { resetSms } from '@/api/sms'
import { message } from 'ant-design-vue'

@Component
export class ResetSms extends Render {
    // showDialog = false

    basicFormConfig = this.initBasicFormConfig() as FormModalDto
    initBasicFormConfig() {
        return {
            title: '重置验证码',
            width: '400px',
            theme: 'light',
            show: false,
            params: {
                confirmText: '重置',
            },
            items: {
                phone: {
                    name: '手机号',
                    element: 'input',
                    required: true
                }
            },
            complete: async () => {
                const data = getModelValue(this.basicFormConfig)
                await resetSms({
                    phone: data.phone
                })
                message.success('重置成功')
                this.basicFormConfig.show = false
            },
            cancel: () => {
                this.basicFormConfig.show = false
            },
            init: () => {
                // initModelValue(this.basicFormConfig)
            }
        } as FormModalDto
    }

    onShow() {
        this.basicFormConfig.show = true
    }
    render() {
        return (
            <>
                <RenderItem name="充值验证码" src={Icon} onClick={this.onShow} />
                { renderModal(this.basicFormConfig) }
            </>
        )
    }
}

export default toNative<{}, {}>(ResetSms)
